From c447e8fde220e36bfe7b22e11a95d5d857d83ba5 Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Thu, 28 Mar 2024 10:02:17 +0530
Subject: fixes: css improvements and UI redesign for manga info page

---
 src/app/manga/[title]/[id]/page.jsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

(limited to 'src/app/manga/[title]/[id]/page.jsx')

diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 4166568..3038b3f 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -2,6 +2,7 @@ import styles from "./info.module.css";
 import Image from "next/image";
 import Buttons from "./buttons";
 import { redirect } from "next/navigation";
+import { FaStar } from "react-icons/fa";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
@@ -15,20 +16,20 @@ export default async function MangaInfo({ params }) {
 		<div className={styles.MangaInfoContainer}>
 			{data && (
 				<div className={styles.MangaInfo}>
-					<div className={styles.MangaHero}>
-						<Image
-							src={data.cover}
-							width={1730}
-							height={400}
-							alt="Cover Poster"
-							className={styles.HeroImage}
-							priority
-						/>
+					<div
+						className={styles.MangaHero}
+						style={{
+							backgroundImage: `url(${data.cover})`,
+							backgroundSize: "cover",
+							backgroundRepeat: "no-repeat",
+							borderRadius: 10,
+						}}
+					>
 						<div className={styles.TitleContainer}>
 							<p
 								style={{
 									color: data.color,
-									backgroundColor: "#3a3a3ac2",
+									// backgroundColor: "#3a3a3ac2",
 									borderRadius: 10,
 									padding: 5,
 								}}
@@ -58,9 +59,6 @@ export default async function MangaInfo({ params }) {
 							Ended on: {data.endDate["day"]}-
 							{data.endDate["month"]}-{data.endDate["year"]}
 						</span>
-						<p className={styles.MangaRatings}>
-							Ratings: {data.rating / 10}
-						</p>
 						<p style={{ color: "#7ED7C1" }}>
 							Genres:
 							{data.genres &&
@@ -77,6 +75,12 @@ export default async function MangaInfo({ params }) {
 									</span>
 								))}
 						</p>
+						<div className={styles.MangaRatings}>
+							<span>Ratings: {data.rating / 10}</span>
+							<span>
+								<FaStar />
+							</span>
+						</div>
 					</div>
 
 					<div className={styles.CharactersContainer}>
-- 
cgit v1.2.3